<template>
  <div class="restaurant">
    <div class="topbar">
      <el-button type="success" size="small" @click="addResturant"
        >添加店铺</el-button
      >
      <el-button
        v-if="showDeleteBtn"
        type="success"
        size="small"
        @click="addResturant"
        >删除</el-button
      >
    </div>
    <div class="auth-property"></div>
    <div class="table-list">
      <!-- <el-scrollbar> -->
      <el-table
        @selection-change="selectItem"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        background="while"
        ref="multipleTable"
        :data="resturantList"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :show-html-tooltip="true"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          :width="item.width"
          v-for="(item, index) in headList"
          :key="index"
          :label="item.label"
          :prop="item.key"
          :fixed="item == 'name'"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button
              @click="handleDetail(scope.$index, scope.row)"
              type="text"
              size="small"
            >
              详情
            </el-button>
            <el-button
              @click="deleteShop(scope.$index, scope.row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
                        <el-button
              @click="goFoodDetail(scope.$index, scope.row)"
              type="text"
              size="small"
            >
              商品列表
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          layout="total, sizes, prev, pager, next"
          :total="totalData"
          background
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
      <!-- </el-scrollbar> -->
    </div>
    <el-drawer
      :with-header="false"
      title="添加数据"
      size="50%"
      :visible.sync="drawerShow"
      
      
    >
      <itemdetail :detailData="detailData" @closeDrawer="closeDrawer"></itemdetail
    ></el-drawer>
  </div>
</template>

<script>
import bus from '../../utils/bus'
import Vue from 'vue'
import {Descriptions} from 'element-ui'
Vue.use(Descriptions)

import {
  // getReataurants,
  getReataurantCounts,
  getReataurantPage,
} from '../../http/reataurant/index'
import { formatTableHead,getRestaurantDetail } from '../../utils/common'
import itemdetail from '../../components/itemdeatil.vue'
import axios from 'axios'
export default {
  data() {
    return {
      detailData:{}, // 传入详情栏的数据
      resturantList: [],
      selectItemIds: 0,
      headList: [],
      addItem:'',
      multipleSelection: [],
      pageSize: 10,
      totalData: 0,
      loading: false,
      drawerShow: false,
    }
  },
  components: {
    itemdetail,
  },
  created() {
    this.getReataurant()
    this.getReataurantCounts()
  },
  beforeCreate(){
    bus.$on('getBusData',data=>{
      this.addItem=data
      console.log(data)
    })
  },
  computed: {
    showDeleteBtn() {
      return this.selectItemIds.length > 0
    },
  },
  methods: {
    selectItem(item) {
      this.selectItemIds = item.map((item) => item.id)
      console.log(this.selectItemIds.length)
    },
    getFoodList(){
     return axios.get('../../shoplist.json').then(res=>res.data)
    },
   async getReataurant() {
      this.loading = true
      // getReataurants(pageSize).then((res) => {
        // console.log(res)
        this.resturantList = await this.getFoodList()
        this.headList = formatTableHead()
        if(this.addItem!==''){
          console.log(2,this.addItem)
          // this.headList.unshift(this.addItem)
        }
        
        this.loading = false
        // console.log(this.headList)
      // })
    },
    getReataurantCounts() {
      this.loading = true
      getReataurantCounts().then((res) => {
        console.log(res)
        this.totalData = res.data.count
        this.loading = false
      })
    },
    getReataurantPage(item, page) {
      this.loading = true
      getReataurantPage(item, page).then((res) => {
        this.resturantList = res.data
        this.loading = false
      })
    },

    addResturant() {
      this.$router.push({name:'addResturant',params:{type:'add',value:''}})
    },
    // 改变每页的数量
    handleSizeChange(val) {
      this.pageSize = val
      this.getReataurant(this.pageSize)
    },
    // 点击详情,弹出详情侧边栏,传数据进去
    handleDetail(index, row) {
      console.log(index, row)
      this.detailData=row
      console.log(this.detailData)
      this.drawerShow = true
    },
    goFoodDetail(){
      this.$router.push('foodManager')
    },
    deleteShop(index, row) {
        this.$confirm('是否要删除该商铺?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.headList.splice(index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    closeDrawer(){
      console.log(111);
      this.drawerShow = false
    },
    changePage(page) {
      let item = (page - 1) * this.pageSize
      this.getReataurantPage(item, this.pageSize)
    },
  },
  beforeDestroy(){
    bus.$off('getBusData')
  }
}
</script>

<style lang="scss" scoped>
.restaurant {
  font-size: 12px !important;
  margin-top: 15px;
  .table-list {
    width: 946px;
  }
}
.table-list {
  margin: 0 auto;
}
.auth-property {
  margin: 20px 0 10px 0;
}
.pagination {
  width: 100%;
  margin: 20px auto;
  text-align: center;
}
</style>
